<template>
	<view>
		<u-navbar title-color="#000000" back-icon-color="#000000" :title-size="40" :background="{background: '#FFFFFF'}" :border-bottom="false" :is-fixed="true" title="账号注册"></u-navbar>
		<view style="padding: 0 40rpx;background-color: #FFFFFF;height:100vh">
			<u-form :model="userForm" ref="userForm" :rules="userFormRules" label-width="180" style="margin-bottom: 30rpx;">
				<u-form-item label="主体名称" prop="enterpriseName">
					<u-input type="select" :select-open="enterpriseShow" placeholder="请选择主体" v-model="userForm.equipmentName" @click="enterpriseShow=true"></u-input>
				</u-form-item>
				<u-form-item label="姓名" prop="name">
					<u-input v-model="userForm.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="性别" prop="sex">
					<u-input type="select" :select-open="sexShow" v-model="userForm.sexLabel" placeholder="请选择性别" @click="sexShow = true"></u-input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile">
					<u-input v-model="userForm.mobile" placeholder="请输入手机号(请确保手机号是正确的)"></u-input>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u-input type="password" v-model="userForm.password" placeholder="请输入密码"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<u-input placeholder="请输入验证码" v-model="userForm.code" type="number"></u-input>
					<u-button slot="right" type="success" size="mini" :disabled="userForm.mobile.length!=11" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item label="城市" prop="cityValue">
					<u-input type="select" :select-open="cityShow" v-model="userForm.cityValue" placeholder="请选择城市" @click="cityShow = true"></u-input>
				</u-form-item>
				<u-form-item label="详细住址" prop="address">
					<u-input type="textarea" v-model="userForm.address" placeholder="请填写详细住址(不含省市县)"></u-input>
				</u-form-item>
			</u-form>
			<u-button @click="submit" style="border-radius: 75px;" type="primary">提交</u-button>
				<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
			<u-select mode="single-column" :list="enterpriseList" value-name="ucId" label-name="name" v-model="enterpriseShow"
			 @confirm="enterpriseConfirm"></u-select>
			<u-select :list="sexList" v-model="sexShow" mode="single-column" @confirm="confirmSex"></u-select>
			<u-select v-model="cityShow" mode="mutil-column-auto" :list="cityList" @confirm="confirmCity"></u-select>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				enterpriseList: [],
				enterpriseShow: false,
				cityShow: false,
				sexShow: false,
				userForm: {
					cityValue: '',
					name: '',
					sex: null,
					mobile: ''
				},
				codeTips: '',
				userFormRules: {
					mobile:[
						{
							required:true,
							message:'请输入手机号',
							trigger:['change',"blur"],
						},
						{
							validator: (rule,value,callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger:['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								if (!value) {
									callback(new Error('手机号不能为空'))
								} else {
									this.utils.request("/api/admin/auth/checkMobileUnique",{mobile:value, id: 0},"post","app",false).then(res=>{
										if (res.data) {
											callback(new Error('该手机号已经存在'))
										} else {
											callback()
										}
									}).catch(error=>{
										
									})
								}
							},
							trigger:['change','blur'],
						}
					],
					equipmentName:[
						{
							required:true,
							message:'请选择所属主体',
							trigger:['change']
						},

					],
				},
				sexList: [{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				cityList: [{
					"value": "650000",
					"label": "新疆维吾尔自治区",
					"children": [{
							"value": "650500",
							"label": "哈密市",
							"children": [{
								"value": "650502",
								"label": "伊州区"
							}, {
								"value": "650521",
								"label": "巴里坤哈萨克自治县"
							}, {
								"value": "650522",
								"label": "伊吾县"
							}]
						},

					]
				}, ]
			}
		},
		onReady() {
			this.$refs.userForm.setRules(this.userFormRules);
			this.getEnterpriseList()
		},
		methods: {
			confirmCity(e) {
				console.log(e)
				e.map((val, index) => {
					this.userForm.cityValue += this.userForm.cityValue == '' ? val.label : '-' + val.label;
				})
				this.userForm.province = e[0].label
				this.userForm.city = e[1].label
				this.userForm.county = e[2].label
				this.cityShow = false
			},
			confirmSex(e) {
				console.log(e)
				this.userForm.sexLabel = e[0].label
				this.userForm.sex = e[0].value
				this.sexShow = false
			},
			// 获取验证码
			getCode() {
				let _this = this;
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					_this.utils.request("/api/admin/aliService/sendSms",{mobile:_this.userForm.mobile},"post","app",false).then(res=>{
						uni.hideLoading();
						// this.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}).catch(error=>{
						uni.hideLoading();
						this.$u.toast('验证码发送失败，请稍后重试');
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			enterpriseConfirm(e) {
				console.log(e[0])

				e.map((val, index) => {
					this.userForm.equipmentName = val.label
					this.userForm.flagId = val.value
				})

			},
			submit() {
				let _this = this
				this.$refs.userForm.validate(valid => {
					if (valid) {
						_this.utils.request("/api/admin/auth/userRegister", _this.userForm, "post", "app", false).then(res => {
							_this.utils.toast("账号注册成功,请等待身份核验")
							setTimeout(() => {
								uni.redirectTo({
									url: "/pages/login/index"
								})
							}, 2000);
						}).catch(error => {
						// console.log(error.msg)
							_this.utils.toast("注册失败"+error.msg)
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			// 所属主体
			getEnterpriseList() {
				let _this = this
				_this.utils.request("/api/admin/auth/getInEnterpriseDominantList", {deleted:false}, "post", "app", false).then(res => {
					_this.enterpriseList = res.data
					console.log(_this.enterpriseList)
				}).catch(error => {
					console.log(error.msg)
				})
			},
		}
	}
</script>

<style>
	.u-title{
		font-size: 20px !important;
	}
</style>
